// 导入 内置模块 获取项目的绝对路径
const path = require('path');
// 导入HTML打包的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 每次打包

//自动清除dist 
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//引入 提取js中的css代码的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//将css文件及代码进行极致压缩s
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');




// 导出暴露的配置
// 五大核心配置
module.exports = {
    // 1.入口 写入整个程序/模块的  主模块---(相对路径)
    entry: {
        // 最优先的--公共css
        commonCSS: './src/js/commonCSS.js',
        // 公共的js
        dom: './src/js/common/dom.js',
        utils: './src/js/common/utils.js',
        http: './src/js/common/http.js',

        // 三方的js/css
        iconfont: './src/js/iconfont.js',
        captcha: '/src/js/captcha-mini.js',
        swiper: './src/lib/lib/swiper/swiper-bundle.js',
        weui: './src/lib/lib/weui/weui/weui.js',

        // 自己的页面js
        advertisement: './src/js/advertisement.js',  //广告页
        login: './src/js/login.js',                  //登录页
        register: './src/js/register.js',            //注册页
        index: './src/js/index.js',                  //首页
        sport: './src/js/sport.js',                  //跑步
        cycling: './src/js/cycling.js',              //骑行
        mine: './src/js/mine.js',                    //个人页
        practice: './src/js/practice.js',            //课程训练页
        page: './src/js/page.js',                    //信息修改
        info:'./src/js/info.js',                     //视频播放页
        start:'./src/js/start.js'                    //视频详情页
    },
    // 2.出口  绝对路径
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js',
        publicPath: './'       //打包完成之后的html文件引入其他资源的基础路径（相对路径）
    },
    // 3.模块的解释器
    module: {
        rules: [
            {
                // css文件
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader']
                // css-loader 先让webpack可以认识css代码  
                // style-loader 将main.js中的css代码提取出来放到页面的style标签里
            },
            {
                // less文件
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: './'
                    }
                }, 'css-loader', 'less-loader']
            },
            {
                // 图片文件
                test: /\.(png|jpg|gif)$/, //配置css中的图片打包
                loader: 'url-loader',     //只有一个处理的loader的写法  
                //可以通过url-loader 将图片压缩为 base64编码格式的图片
                //大图就不压缩  小图可以压缩
                options: {
                    name: '[hash:16].[ext]',  // 图片输出的名字hash长度16位 默认32位
                    limit: 30 * 1024,  // 限制 小于30kb base64处理
                    esModule: false,  //默认css中的图片以ES6的模块进行打包，但是html中图片只能以node下的commonjs规范进行打包
                    outputPath: 'img',      //有可能存在图片打包的冲突，要求直接将css打包模块设置为node的模块打包
                },
            },
            {
                // html文件
                test: /\.html/,
                loader: 'html-loader'
            },
            {
                // 字体文件
                test: /\.(ttf|woff|woff2|eot|svg)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'fonts'   //输出的目录
                }
            }
        ]
    },
    // 4.插件
    plugins: [
        // 广告页
        new HtmlWebpackPlugin({
            template: './src/advertisement.html',
            filename: 'advertisement.html',
            // 关联 模块与 页面
            chunks: ['advertisement', 'commonCSS', 'dom']
        }),
        // 登录页
        new HtmlWebpackPlugin({
            template: './src/login.html',
            filename: 'login.html',
            // 关联 模块与 页面
            chunks: ['login', 'commonCSS', 'iconfont', 'dom', 'http', 'utils']
        }),
        // 注册页
        new HtmlWebpackPlugin({
            template: './src/register.html',
            filename: 'register.html',
            // 关联 模块与 页面
            chunks: ['register', 'commonCSS', 'iconfont', 'dom', 'captcha', 'http', 'utils']
        }),
        // 首页
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            // 关联 模块与 页面
            chunks: ['commonCSS', 'iconfont', 'http', 'index', 'dom', 'utils', 'swiper']
        }),
        // 跑步页
        new HtmlWebpackPlugin({
            template: './src/sport.html',
            filename: 'sport.html',
            // 关联 模块与 页面
            chunks: ['commonCSS', 'iconfont', 'http', 'sport', 'dom', 'utils']
        }),
        // 骑行页
        new HtmlWebpackPlugin({
            template: './src/cycling.html',
            filename: 'cycling.html',
            // 关联 模块与 页面
            chunks: ['commonCSS', 'iconfont', 'http', 'cycling', 'dom', 'utils']
        }),
        // 个人页面
        new HtmlWebpackPlugin({
            template: './src/mine.html',
            filename: 'mine.html',
            // 关联 模块与 页面
            chunks: ['commonCSS', 'iconfont', 'http', 'mine', 'dom', 'utils']
        }),
        // 课程训练页
        new HtmlWebpackPlugin({
            template: './src/practice.html',
            filename: 'practice.html',
            // 关联 模块与 页面
            chunks: ['commonCSS', 'iconfont', 'http', 'practice', 'dom', 'utils']
        }),
        // 信息修改页
        new HtmlWebpackPlugin({
            template: './src/page.html',
            filename: 'page.html',
            // 关联 模块与 页面
            chunks: ['commonCSS', 'iconfont', 'http', 'page', 'dom', 'utils', 'weui']
        }),
        // 视频播放页
        new HtmlWebpackPlugin({
            template: './src/info.html',
            filename: 'info.html',
            // 关联 模块与 页面
            chunks: ['commonCSS', 'http','iconfont', 'info', 'dom', 'utils']
        }),
        // 开始训练页
        new HtmlWebpackPlugin({
            template: './src/start.html',
            filename: 'start.html',
            // 关联 模块与 页面
            chunks: ['commonCSS', 'iconfont','http', 'start', 'dom', 'utils']
        }),



        // plugin 添加
        new CleanWebpackPlugin(),
        // css 添加
        new MiniCssExtractPlugin({
            filename: 'css/[name].css' // 输出到css文件夹里
        }),
        // 自动清楚dist文件的 插件
        new OptimizeCssAssetsWebpackPlugin()
    ],

    // 5.环境   本地开发环境  development      线上生产环境   production
    mode: 'development',

    // 6.本地开发服务器配置
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip
        port: 8081,  // 端口  8080 80  8081 8082
        open: true, // 自动打开服务
        publicPath: '/', // 静态资源查找路径
        openPage: 'advertisement.html', // 打开的页面   
    },          //advertisement(广告页)
    target: 'web', // 目标是浏览器

}
